<template>
  <div class="pad-graph">
    <div class="graph" ref="chart"></div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useEcharts } from '@/hooks'
const chart = ref(null)
const option = reactive({
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove',
    formatter: e => {
      const t = e.color
      return `<div class="font-bold text-16px">${e.name}</div>\n        <div style="color: ${t}">正确率：${(e.data.personal_rate * 100).toFixed(2)}%  习题量：${e.data.personal_count}</div>\n        <div style="color: #999; font-size: 14px; margin-top: 10px;">点击“知识点”查看详情</div>\n        `
    }
  },
  series: [
    {
      type: 'tree',
      data: [],
      roam: true,
      layout: 'radial',
      symbol: 'circle',
      top: '1%',
      left: '1%',
      bottom: '1%',
      right: '1%',
      label: {
        show: false
      },
      expandAndCollapse: false,
      animationDurationUpdate: 750,
      initialTreeDepth: -1,
      emphasis: {
        focus: 'descendant',
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
          opacity: 1
        }
      },
      lineStyle: {
        width: 1
      }
    }
  ]
})

const { chartInstance, addEvent } = useEcharts(chart, option)
// 渲染完成的回调函数
addEvent('finished', function () {
  window.android?.finishDisplayKnowledgeTree()
})

console.log(chartInstance)
// 点击知识树节点
addEvent('click', function (params) {
  console.log('点击的知识点树', params)
  window.android.selectKnowledge(params.data.id)
})
const knowledgeTree = ref({})
onMounted(() => {
  knowledgeTree.value = JSON.parse(window.android.getKnowledgeTreeData())
  console.log('拿到的知识点信息', knowledgeTree.value)
  applyItemStyle(knowledgeTree.value)
  option.series[0].data = [knowledgeTree.value]
  // 应用上颜色的数据
  console.log('应用上颜色后的知识点信息', knowledgeTree.value)
})

// 给安卓设置知识树的方法
function setKnowledgeTree(dataTree) {
  console.log(typeof dataTree)
  const data = dataTree
  console.log('给安卓设置的知识点树', data)
  applyItemStyle(data)
  console.log('应用上颜色后的知识点信息', data)
  option.series[0].data = [data]
}
window.android.setKnowledgeTree = setKnowledgeTree

function getItemStyle(rate, count) {
  const base = {
    borderColor: '#fff',
    borderWidth: 1,
    opacity: 3
  }

  if (rate >= 0.95) {
    return {
      color: '#18783B',
      ...base
    }
  } else if (rate >= 0.85) {
    return {
      color: '#32B16C',
      ...base
    }
  } else if (rate >= 0.75) {
    return {
      color: '#B3D465',
      ...base
    }
  } else if (rate >= 0.6) {
    return {
      color: '#EC6941',
      ...base
    }
  } else if (rate > 0 || (rate === 0 && count !== 0)) {
    return {
      color: '#D92325',
      ...base
    }
  } else {
    return {
      color: '#E0E0E0',
      ...base
    }
  }
}
function getSymbolSize(value, depth, node) {
  if (value === 0 && node.personal_count === 0) {
    return 8
  }

  // 根据层级返回不同的大小
  switch (depth) {
    case 1:
      return 25
    case 2:
      return 20
    case 3:
      return 15
    default:
      return 12
  }
}
// 给知识点树添加颜色样式以及添加弱项知识点
function applyItemStyle(data, depth = 1) {
  if (Array.isArray(data)) {
    data.forEach(node => {
      // const nodeRate = isCompare.value ? node.grade_rate : node.class_rate
      // const nodeCount = isCompare.value ? node.grade_count : node.class_count
      const nodeRate = node.personal_rate
      // const nodeCount = node.class_count
      node.symbolSize = getSymbolSize(nodeRate, depth, node)
      node.itemStyle = getItemStyle(nodeRate, node.personal_count)

      if (node.children) {
        applyItemStyle(node.children)
      }
    })
  } else {
    const dataRate = data.personal_rate
    data.symbolSize = getSymbolSize(dataRate, depth, data)
    data.itemStyle = getItemStyle(dataRate, data.personal_count)
    if (data.children) {
      applyItemStyle(data.children)
    }
  }
}
</script>
<style lang="less" scoped>
.pad-graph,
.graph {
  height: 100%;
  width: 100%;
  background-color: transparent;
}
</style>
